<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="./echarts.js"></script>
    <!-- 引入百度地图作为底图 -->
    <script type="text/javascript" src="./bmap.js"></script>
    <!-- 通过秘钥 获得百度地图API-->
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=ifE0YvqOw4HOjgIyFUO7gP5XmBdr1sWV"
    ></script>
    <!-- 通过layui来设置控件（左侧八个图标）样式 -->
    <link rel="stylesheet" href="js/layui/css/layui.css" />
    <!--  设置屏幕样式 -->
    <style type="text/css">
      html {
        height: 100%;
      }

      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>

  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:100%;"></div>
    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));

      //设置数据（初始数据，每个地址的坐标）
      var geoCoordMap = {
        上海: [121.4648, 31.2891],
        东莞: [113.8953, 22.901],
        东营: [118.7073, 37.5513],
        中山: [113.4229, 22.478],
        临汾: [111.4783, 36.1615],
        临沂: [118.3118, 35.2936],
        丹东: [124.541, 40.4242],
        丽水: [119.5642, 28.1854],
        乌鲁木齐: [87.9236, 43.5883],
        佛山: [112.8955, 23.1097],
        保定: [115.0488, 39.0948],
        兰州: [103.5901, 36.3043],
        包头: [110.3467, 41.4899],
        北京: [116.4551, 40.2539],
        北海: [109.314, 21.6211],
        南京: [118.8062, 31.9208],
        南宁: [108.479, 23.1152],
        南昌: [116.0046, 28.6633],
        南通: [121.1023, 32.1625],
        厦门: [118.1689, 24.6478],
        台州: [121.1353, 28.6688],
        合肥: [117.29, 32.0581],
        呼和浩特: [111.4124, 40.4901],
        咸阳: [108.4131, 34.8706],
        哈尔滨: [127.9688, 45.368],
        唐山: [118.4766, 39.6826],
        嘉兴: [120.9155, 30.6354],
        大同: [113.7854, 39.8035],
        大连: [122.2229, 39.4409],
        天津: [117.4219, 39.4189],
        太原: [112.3352, 37.9413],
        威海: [121.9482, 37.1393],
        宁波: [121.5967, 29.6466],
        宝鸡: [107.1826, 34.3433],
        宿迁: [118.5535, 33.7775],
        常州: [119.4543, 31.5582],
        广州: [113.5107, 23.2196],
        廊坊: [116.521, 39.0509],
        延安: [109.1052, 36.4252],
        张家口: [115.1477, 40.8527],
        徐州: [117.5208, 34.3268],
        德州: [116.6858, 37.2107],
        惠州: [114.6204, 23.1647],
        成都: [103.9526, 30.7617],
        扬州: [119.4653, 32.8162],
        承德: [117.5757, 41.4075],
        拉萨: [91.1865, 30.1465],
        无锡: [120.3442, 31.5527],
        日照: [119.2786, 35.5023],
        昆明: [102.9199, 25.4663],
        杭州: [119.5313, 29.8773],
        枣庄: [117.323, 34.8926],
        柳州: [109.3799, 24.9774],
        株洲: [113.5327, 27.0319],
        武汉: [114.3896, 30.6628],
        汕头: [117.1692, 23.3405],
        江门: [112.6318, 22.1484],
        沈阳: [123.1238, 42.1216],
        沧州: [116.8286, 38.2104],
        河源: [114.917, 23.9722],
        泉州: [118.3228, 25.1147],
        泰安: [117.0264, 36.0516],
        泰州: [120.0586, 32.5525],
        济南: [117.1582, 36.8701],
        济宁: [116.8286, 35.3375],
        海口: [110.3893, 19.8516],
        淄博: [118.0371, 36.6064],
        淮安: [118.927, 33.4039],
        深圳: [114.5435, 22.5439],
        清远: [112.9175, 24.3292],
        温州: [120.498, 27.8119],
        渭南: [109.7864, 35.0299],
        湖州: [119.8608, 30.7782],
        湘潭: [112.5439, 27.7075],
        滨州: [117.8174, 37.4963],
        潍坊: [119.0918, 36.524],
        烟台: [120.7397, 37.5128],
        玉溪: [101.9312, 23.8898],
        珠海: [113.7305, 22.1155],
        盐城: [120.2234, 33.5577],
        盘锦: [121.9482, 41.0449],
        石家庄: [114.4995, 38.1006],
        福州: [119.4543, 25.9222],
        秦皇岛: [119.2126, 40.0232],
        绍兴: [120.564, 29.7565],
        聊城: [115.9167, 36.4032],
        肇庆: [112.1265, 23.5822],
        舟山: [122.2559, 30.2234],
        苏州: [120.6519, 31.3989],
        莱芜: [117.6526, 36.2714],
        菏泽: [115.6201, 35.2057],
        营口: [122.4316, 40.4297],
        葫芦岛: [120.1575, 40.578],
        衡水: [115.8838, 37.7161],
        衢州: [118.6853, 28.8666],
        西宁: [101.4038, 36.8207],
        西安: [109.1162, 34.2004],
        贵阳: [106.6992, 26.7682],
        连云港: [119.1248, 34.552],
        邢台: [114.8071, 37.2821],
        邯郸: [114.4775, 36.535],
        郑州: [113.4668, 34.6234],
        鄂尔多斯: [108.9734, 39.2487],
        重庆: [107.7539, 30.1904],
        金华: [120.0037, 29.1028],
        铜川: [109.0393, 35.1947],
        银川: [106.3586, 38.1775],
        镇江: [119.4763, 31.9702],
        长春: [125.8154, 44.2584],
        长沙: [113.0823, 28.2568],
        长治: [112.8625, 36.4746],
        阳泉: [113.4778, 38.0951],
        青岛: [120.4651, 36.3373],
        韶关: [113.7964, 24.7028]
      };

      //北京与其他各城市相关联
      var BJData = [
        [
          {
            name: "北京"
          },
          {
            name: "上海",
            value: 95
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "广州",
            value: 90
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "大连",
            value: 80
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "南宁",
            value: 70
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "南昌",
            value: 60
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "拉萨",
            value: 50
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "长春",
            value: 40
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "包头",
            value: 30
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "重庆",
            value: 20
          }
        ],
        [
          {
            name: "北京"
          },
          {
            name: "常州",
            value: 10
          }
        ]
      ];

      //上海与其他各城市相关联
      var SHData = [
        [
          {
            name: "上海"
          },
          {
            name: "包头",
            value: 95
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "昆明",
            value: 90
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "广州",
            value: 80
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "郑州",
            value: 70
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "长春",
            value: 60
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "重庆",
            value: 50
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "长沙",
            value: 40
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "北京",
            value: 30
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "丹东",
            value: 20
          }
        ],
        [
          {
            name: "上海"
          },
          {
            name: "大连",
            value: 10
          }
        ]
      ];

      //广州与其他各城市相关联
      var GZData = [
        [
          {
            name: "广州"
          },
          {
            name: "福州",
            value: 95
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "太原",
            value: 90
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "长春",
            value: 80
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "重庆",
            value: 70
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "西安",
            value: 60
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "成都",
            value: 50
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "常州",
            value: 40
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "北京",
            value: 30
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "北海",
            value: 20
          }
        ],
        [
          {
            name: "广州"
          },
          {
            name: "海口",
            value: 10
          }
        ]
      ];

      //飞机的样式，（通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。）
      var planePath =
        "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";

      /*
       * 核心的一个方法
       * 通过传入相关联的数据（如GZData），来返回城市之间的连线数据（也就是两个城市之间的坐标）
       */

      var convertData = function(data) {
        //闭包定义方法
        var res = [];
        for (var i = 0; i < data.length; i++) {
          //获取每个父类城市与父类城市有关联的城市（如广州至海口、广州至北海等）
          var dataItem = data[i];
          var fromCoord = geoCoordMap[dataItem[0].name]; //通过父类城市名字获得坐标
          var toCoord = geoCoordMap[dataItem[1].name]; //通过子类城市名字获得坐标

          if (fromCoord && toCoord) {
            //两个城市都不为空，则将两个城市对应的名字、坐标使用对象封装，添加至res数组中
            res.push([
              {
                name: dataItem[0].name,
                coord: fromCoord
              },
              {
                name: dataItem[1].name,
                coord: toCoord
              }
            ]);
          }
        }
        //将封装好的数组返回
        return res;
      };

      var color = ["#a6c84c", "#ffa022", "#46bee9"]; //每个线路的颜色都不同，
      var series = []; //在地图上显示的数据

      //遍历这三个数组，每个数组对应着自己的连线（连线分为了：轨迹、飞机、和每个城市的点）
      [
        [
          {
            name: "北京",
            top: "10"
          },
          BJData
        ],
        [
          {
            name: "上海",
            top: "09"
          },
          SHData
        ],
        [
          {
            name: "广州",
            top: "08"
          },
          GZData
        ]
      ].forEach(function(item, i) {
        series.push(
          //第一层：轨迹
          {
            name: item[0].name + " Top" + item[0].top, //名字,名字必须与option对象中的legend属性中的data属性名一样，才能将他们相关联
            type: "lines", //类型为线条
            coordinateSystem: "bmap", //设置显示的地图（也就是自己设置的百度地图）
            zlevel: 1, //堆叠等级
            effect: {
              //设置线条动态效果
              show: true, //是否显示
              period: 6, //周期，也就是速度
              trailLength: 0.7, //痕迹长度
              color: "#fff", //颜色
              symbolSize: 3 //痕迹大小
            },
            lineStyle: {
              //设置线条样式
              normal: {
                color: color[i], //设置颜色
                width: 0, //宽度，设置为0为了突出飞机
                curveness: 0.1 //弯曲的弧度
              }
            },
            data: convertData(item[1]) //线条类型所对应的数据，[ [{name:第一个点名字,coord:第一个点坐标},{name:第二个点名字,coord:第二个点坐标}] , [第二条线条] , [第三条],....]
          },
          //飞机的样式（其实与轨迹差不多，就是换了一个飞机的图标）
          {
            name: item[0].name + " Top" + item[0].top, //名字
            type: "lines",
            coordinateSystem: "bmap",
            zlevel: 2, //1.设置的层一样，则会使组件或图表样式使用同一个canvas渲染。2.数值越大越在上面
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
              symbol: planePath, //设置图标（也就是飞机），可通过：“image://url”设置为图片
              symbolSize: 15 //设置图标大小
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 1,
                opacity: 0.5, //线条的透明度
                curveness: 0.1
              }
            },
            data: convertData(item[1])
          },
          //设置散点（effectScatter）
          {
            name: item[0].name + " Top" + item[0].top, //名字
            type: "effectScatter", //类型为动态散点型
            coordinateSystem: "bmap",
            zlevel: 2,
            //涟漪动画特效
            rippleEffect: {
              brushType: "stroke" //波纹的绘制方式，还有一种就是“fill(默认)”
            },
            //设置标签（也就是这个点的文本说明）
            label: {
              normal: {
                //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式。
                show: true, //是否显示标签
                position: "right", //标签的位置
                formatter: "{b}" //内容格式器，{b}：数据名
              }
            },
            //散点的尺寸：当数据加载完成之后执行回调，通过返回值来设置大小
            symbolSize: function(val) {
              return val[2] / 8;
            },
            //设置点的样式
            itemStyle: {
              normal: {
                color: color[i]
              }
            },
            //设置数据，使用map方法返回一个新数组（因为data不能使用回调方法），格式：[{name:"广州",value:[坐标x,y,value]},{第二个点},.....]
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
              };
            })
          }
        );
      });

      option = {
        //backgroundColor: '#404a59',//背景颜色，使用了百度地图，有时候就会遮盖住地图
        title: {
          //设置标题文本
          text: "模拟迁徙",
          subtext: "数据纯属虚构", //副标题
          left: "center", //组件离左侧的距离
          textStyle: {
            //文本样式
            color: "#fff"
          }
        },
        tooltip: {
          //提示信息框
          trigger: "item",
          //alwaysShowContent :true,    //开启提示框总是显示
          formatter: function(params) {
            //内容格式器，来设置信息提示框的数据，
            //console.info(params);
            var res = "";
            if (params.componentSubType == "effectScatter") {
              res += "地址：" + params.data.name + "<br/>";
              res += "经度：" + params.value[0] + "<br/>";
              res += "维度：" + params.value[1] + "<br/>";
              res += "影响力：" + params.value[2] + "<br/>";
            } else {
              res += params.data.fromName + " 飞往 " + params.data.toName;
            }
            return res;
          }
        },
        legend: {
          //图例控件样式
          orient: "vertical",
          top: "bottom",
          left: "right",
          data: ["北京 Top10", "上海 Top09", "广州 Top08"], //图例的data必须与series属性的name一样
          textStyle: {
            //文本样式
            color: "#fff"
          }
          //                          selectedMode: 'single' //只允许选中一个图例
        },
        //  geo: {
        //      map: 'china',
        //      label: {
        //          emphasis: {
        //              show: false
        //          }
        //      },
        //      roam: true,
        //      itemStyle: {
        //          normal: {
        //              areaColor: '#323c48',
        //              borderColor: '#404a59'
        //          },
        //          emphasis: {
        //              areaColor: '#2a333d'
        //          }
        //      }
        //  },
        //设置为百度地图
        bmap: {
          //设置地图原点
          center: [120.13066322374, 30.240018034923],
          //地图缩放级别
          zoom: 7,
          //是否允许拖拽
          roam: true
        },
        series: series
      };

      // 使用刚指定的配置项和数据显示图表。
      debugger;
      myChart.setOption(option);
      // 获取百度地图实例，使用百度地图自带的控件
      var map = myChart
        .getModel()
        .getComponent("bmap")
        .getBMap();
      //左侧的八个图标
      var layIcon = [
        "layui-icon-app",
        "layui-icon-senior",
        "layui-icon-set",
        "layui-icon-home",
        "layui-icon-loading",
        "layui-icon-tree",
        "layui-icon-console",
        "layui-icon-theme"
      ];
      var conMethod = [
        function() {
          alert("你好1");
        },
        function() {
          alert("你好2");
        },
        function() {
          alert("你好3");
        },
        function() {
          alert("你好4");
        },
        function() {
          alert("你好5");
        },
        function() {
          alert("你好6");
        },
        function() {
          alert("你好7");
        },
        function() {
          alert("你好8");
        }
      ];
      //3.创建地图实例
      //          var map = new BMap.Map("container");
      //创建点坐标
      //          var point = new BMap.Point(116.404, 39.915);
      //          //初始化地图
      //          map.centerAndZoom(point, 9);
      //          map.enableScrollWheelZoom(true); //开启支持滚轮缩放

      //          //添加控件
      map.addControl(
        new BMap.NavigationControl({
          offset: new BMap.Size(80, 40),
          type: BMAP_NAVIGATION_CONTROL_SMALL
        })
      );

      for (var j = 0; j < 8; j++) {
        //添加自定义控件
        function myControl() {
          //设置默认停靠与偏移量
          this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
          this.defaultOffset = new BMap.Size(20, 40 + 50 * j);
        }

        //将构造函数继承于BMap.Control();
        myControl.prototype = new BMap.Control();

        myControl.prototype.initialize = function(map) {
          var i = document.createElement("i");
          i.style =
            "font-size: 30px; color: #333333;background:#888888;border-radius:10px";
          i.className = "layui-icon " + layIcon[j];

          //绑定点击事件
          i.onclick = conMethod[j];

          //将dom添加到地图容器中
          map.getContainer().appendChild(i);

          //将dom元素返回
          return i;
        };
        //添加自定义控件
        map.addControl(new myControl());
      }
    </script>
  </body>
</html>
